﻿@page
@model IdentityServer.Pages.SignalR.Chat.IndexModel
@using IdentityServer4.Extensions

@section Styles
{
    <partial name="_ChatStylesPartial" />
}

<div class="row">
    <input type="hidden" id="user" value="@User.GetDisplayName()" />
    <div class="col-md-12">@User.GetDisplayName()</div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label">Message：</label>
            <textarea class="form-control" rows="3" style="resize:none" placeholder="消息内容" id="messageInput"></textarea>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-7">
        <span style="background-color: lavender">连接状态：</span>
        <span id="connState" style="background-color: lavender">未连接</span>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <input id="offline" type="button" value="下线" class="btn btn-warning" />
            <input id="clearChatBoard" type="button" value="清空所有在线用户的聊天版" class="btn btn-danger" />
            <input id="online" type="button" value="上线" class="btn btn-success" style="float: right" />
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <input id="send" type="button" value="发送" class="btn btn-primary" style="float: right" data-toggle="tooltip" title="也可以按 Ctrl + Enter(回车) 发送" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>
<div class="row">
    <div class="col-md-12 chat-board">

    </div>
    <!-- 消息气泡模板 -->
    <div id="messageBubbleTemplate" style="display: none">
        <!-- Left -->
        <div class="chat-other">
            <div class="logo"><img src="" /></div>
            <div class="name"></div>
            <div class="content-box">
                <div class="chat-triangle"></div>
                <div class="content"></div>
            </div>
        </div>
        <!-- Right -->
        <div class="chat-self">
            <div class="logo"><img src="" /></div>
            <div class="name"></div>
            <div class="content-box">
                <div class="chat-triangle"></div>
                <div class="content"></div>
            </div>
        </div>
        <!-- Notice/Center -->
        <div class="chat-notice">
            <span></span>
        </div>
    </div>
</div>

@section Scripts {
    <partial name="_SignalRScriptsPartial" />
    <partial name="_ChatScriptsPartial" />
}